<template>
	<div class="header-box">
		<el-row type="flex" justify="space-between">
			<el-col :span="6">
				<button class="btn-tool" title="折叠" @click="collapse">
					<i class="el-icon-d-arrow-left"></i>
				</button>
				<button class="btn-tool" title="全屏" @click="isFullScreen">
					<i class="el-icon-rank"></i>
				</button>
			</el-col>
			<el-col :span="6" align="right">
				<el-dropdown trigger="click" class="user-name" @command="handleCommand">
					<span class="el-dropdown-link">
						{{ username }}<i class="el-icon-caret-bottom el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="profile" disabled>个人资料</el-dropdown-item>
						<el-dropdown-item command="updatepwd" disabled>修改密码</el-dropdown-item>
						<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {fullScreen} from '../../util/Util.js'
	export default {
		inject: ['reload'],
		props: [],
		data() {
			return {
			}
		},
		mounted () {
		},
		methods: {
			collapse() {
				this.$emit("collapse")
			},
			isFullScreen(){
				fullScreen();
			},
			handleCommand(command) {
				switch (command) {
					case 'logout':
						this.$router.replace({
							path: '/login'
						})
						break
				}
			}
		},
		computed: {
			username() {
				let {
					username
				} = JSON.parse(sessionStorage.getItem('user'))
				return username.toUpperCase()
			}
		}
	}
</script>

<style scoped>
	.btn-tool {
		border: none;
		background: transparent;
		font-size: 18px;
		padding: 5px 10px;
		cursor: pointer;
		outline: none;
		text-align: left;
	}

	.user-name {
		margin-left: 20px;
	}
</style>
